<template>
	<view class="detail" v-if="data">
		<scroll-view scroll-y class="main">
			<view class="header">
				<image :src="oss(data.task.user.avatar)" class="cover" mode=""></image>
				<view class="info">
					<view class="title">
						<view class="l">{{data.task.name}}</view>
					</view>
					<view class="types">
						<view class="btn">{{data.task.taskcate.name}}</view>
						<view class=" btn1">{{data.task.platform}}</view>
					</view>

				</view>
				<view class="moeny">佣金{{data.task.price}}元</view>
			</view>
			<view class="numBox">
				<view class="num">
					<view class="t">{{data.task.tasknum}}</view>
					<view class="b">限时完成</view>
				</view>
				<view class="num">
					<view class="t">{{data.task.checknum}}</view>
					<view class="b">限时审核</view>
				</view>
				<view class="num">
					<view class="t">{{data.task.acceptnum}}</view>
					<view class="b">已完成数</view>
				</view>
				<view class="num">
					<view class="t">{{data.task.total_price}}元</view>
					<view class="b">委托赏金</view>
				</view>
			</view>
			<view class="titles">任务说明</view>
			<view class="desc">
				{{data.task.content}}
			</view>
			<view class="titles">任务步骤/流程</view>
			<view class="steps">
				<template v-for="(item,index) of data.task.step_text">
					<view class="step" v-if="item.type == '1'">
						<view class="l">
							<image src="../../../static/task/step.png" mode="" class="icon"></image>
							<view class="word">第{{index+1}}步</view>
						</view>
						<view class="r">
							<view class="title">{{item.content}}</view>
							<view class="copy" @click="copy(item.url)">复制</view>
							<view class="btns">
								<view class="btn">点击访问链接 <image src="../../../static/task/link.png" class="icon" mode="">
									</image>
								</view>
								<view class="btn btn1" @click="copy(item.url)">点击复制链接 <image
										src="../../../static/task/copy.png" class="icon" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="step" v-if="item.type == '0'">
						<view class="l">
							<image src="../../../static/task/step.png" mode="" class="icon"></image>
							<view class="word">第{{index+ 1}}步</view>
						</view>
						<view class="r">
							<view class="title">{{item.content}}</view>
							<image :src="oss(item.image)" mode="widthFix" class="example"  @click="preview(item.image)"></image>
						</view>
					</view>
				</template>

			</view>
			<view class="titles">上传验证/审核</view>
			<view class="steps">
				<template v-for="(item,index) of data.task.check_text">
					<view class="step" v-if="item.type == '0'">
						<view class="l">
							<image src="../../../static/task/step.png" mode="" class="icon"></image>
							<view class="word">第1步</view>
						</view>
						<view class="r">
							<view class="title">{{item.content}}</view>
							<view class="add">
								<image :src="oss(item.image)" class="example" mode="widthFix"></image>
								<view class="addBox"  >
									<template v-if="data.checknote[index].image">
										<image :src="oss(data.checknote[index].image)" style="width: 130rpx;" mode="widthFix"  @click="preview(data.checknote[index].image)"></image>
									</template>
									<template v-else>
										<image src="../../../static/task/add.png" class="icon" mode=""></image>
										<view class="word">上传截图</view>
									</template>
								</view>
							</view>
						</view>
					</view>
					<view class="step" v-if="item.type == '1'">
						<view class="l">
							<image src="../../../static/task/step.png" mode="" class="icon"></image>
							<view class="word">第2步</view>
						</view>
						<view class="r">
							<view class="title">{{item.content}}</view>
							<input type="text" v-model="data.checknote[index].content" class="inputBox" disabled />
						</view>
					</view>
				</template>

			</view>

		</scroll-view>
		<view class="join" v-if="data.status === 1">
			<view class="btn" @click="show = true">审核拒绝</view>
			<view class="btn1" @click="show1 = true">审核通过</view>
		</view>
		<u-modal :show="show1" title="`确定审核通过吗？`" @confirm="confirm1" @cancel="show1 = false"
			:showCancelButton="true">
		
		</u-modal>
		<u-popup :show="show" @close="show = false"  mode="center" round="10">
			<view class="refuse">
				<textarea v-model="content" placeholder="请输入拒绝理由" class="reason" />
				
				<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
					:maxCount="10"></u-upload>
				<view class="btn" @click="refund">提交</view>
			</view>
		</u-popup>
		<u-popup :show="show2" @close="show2 = false" mode="center">
		          <image :src="url" mode="widthFix" style="width: 750rpx;" @click="show2 = false"></image>
				</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				data: '',
				show: false,
				show1: false,
				fileList1: [],
				content: '',
				url:'',
				show2: false
			};
		},
		onLoad(options) {
			this.id = options.id
			this.getDetail()
		},
		methods: {
			preview(url) {
				this.show2 = true
				this.url = this.oss(url)
			},
			refund() {
				let images = this.fileList1.map((value) => {
					return value.url
				})
				if(this.content === ''){
					uni.$u.toast('请输入拒绝理由')
					return
				}
				this.show = false
				
				uni.$u.http.post('/checklist', {
					order_id: this.id,
					type: 'examine',
					status: -1,
					note: [
						{
							images,
							content: this.content
						}
					]
				}).then(res => {
					if (res.code == 1) {
						uni.$u.toast(res.msg)
						setTimeout(() => {
							 uni.$emit('checktask')
							uni.$u.route({
								type: 'back'
							})
						}, 1000)
					}
				}).catch((res) => {
				
				})
			},
			confirm1() {
				this.show1 = false
				uni.$u.http.post('/checklist', {
					order_id: this.id,
					type: 'examine',
					status: 2
				}).then(res => {
					if (res.code == 1) {
						uni.$u.toast(res.msg)
						setTimeout(() => {
							 uni.$emit('checktask')
							uni.$u.route({
								type: 'back'
							})
						}, 1000)
					}
				}).catch((res) => {
				
				})
			},
			save() {
				uni.$u.http.post('/check', {
					checknote: this.data.checknote,
					id: this.data.task_order_id
				}).then(res => {
					if (res.code == 1) {
						uni.$u.toast(res.msg)
					}
				}).catch((res) => {
				
				})
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					console.log(result)
					if (result) {
						let item = this[`fileList${event.name}`][fileListLen]
						this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
							status: 'success',
							message: '',
							url: result
						}))
						fileListLen++
					} else {
						this[`fileList${event.name}`].splice(fileListLen, 1)
					}
			
				}
				console.log(this[`fileList${event.name}`])
			},
			uploadFilePromise(url) {
				let that = this
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: that.Upload.uploadurl, // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							type: 'image',
							token: uni.getStorageSync('token')
						},
						success: (res) => {
							let data = JSON.parse(res.data)
							if (res.statusCode === 200 && data.code === 1 && data.data) {
								resolve(data.data.url)
							} else {
								resolve()
							}
						}
					});
				})
			},
			accept() {
				uni.$u.http.post('/taskdetail', {
					type: 'accept',
					id: this.id
				}).then(res => {
					if (res.code == 1) {
						uni.$u.toast(res.msg)
						this.data.orderStatus = 0
					}
				}).catch((res) => {

				})
			},
			time(num) {
				if (num < 60) {
					return num + '分钟'
				} else if (num >= 60 && num < 1440) {
					return num / 60 + '小时'
				} else {
					return num / 1440 + '天'
				}
			},
			copy(content) {
				uni.setClipboardData({
					data: content,
					success: function() {
						uni.$u.toast('复制成功')
					},
					fail: function() {
						uni.$u.toast('复制失败')
					}
				});
			},
			time(num) {
				if (num < 60) {
					return num + '分钟'
				} else if (num >= 60 && num < 1440) {
					return num / 60 + '小时'
				} else {
					return num / 1440 + '天'
				}
			},
			getDetail() {
				uni.$u.http.post('/checklist', {
					type: 'checkinfo',
					order_id: this.id
				}).then(res => {
					if (res.code == 1) {
						res.data.task.checknum = this.time(res.data.task.checknum)
						res.data.task.tasknum = this.time(res.data.task.tasknum)
						this.data = res.data
						console.log(this.data)
						}
				}).catch((res) => {

				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.refuse{
		padding: 40rpx;
		width: 500rpx;
		.reason{
			width: 400rpx;
			height: 180rpx;
			border-bottom: 1px solid #eee;
			margin-bottom: 20rpx;
		}
		.addBox{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			border: 1px solid #FFCE54;
			width: 130rpx;
			height: 130rpx;
			border-radius: 10rpx;
			.icon{
				width: 27rpx;
				height: 27rpx;
				margin-bottom: 10rpx;
			}
			.word{
				color: #FF8007;
				font-size: 22rpx;
			}
		}
		.btn{
			width: 200rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background: #FF5B1A;
			font-size: 28rpx;
			border-radius: 10rpx;
			margin: 20rpx auto 0;
		}
	}
	.join{
		
		height: 88rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		font-size: 32rpx;
		color: #191615;
		width: 100%;
		position: absolute;
		left: 00rpx;
		bottom: 20rpx;
		flex-shrink: 0;
		.btn{
			background-color: #eee;
			border: 1px solid #eee;
			box-sizing: border-box;
			width: 280rpx;
			border-radius: 10rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.btn1{
			background: linear-gradient(to right, #FFDF41, #FFC141);
			width: 280rpx;
			border-radius: 10rpx;
			height: 88rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	.detail {
		height: 100vh;
		overflow: hidden;
		position: relative;
		display: flex;
		flex-direction: column;

		.main {
			overflow: hidden;
			position: absolute;
			left: 0;
			width: 100%;
			bottom: 120rpx;
			top: 0;
		}

		.titles {
			color: #191615;
			font-size: 34rpx;
			padding: 20rpx 30rpx 10rpx;
			font-weight: bold;
		}

		// .join {
		// 	background: linear-gradient(to right, #FFDF41, #FFC141);
		// 	height: 88rpx;
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: center;
		// 	font-size: 32rpx;
		// 	color: #191615;
		// 	border-radius: 44rpx;
		// 	width: 590rpx;
		// 	position: absolute;
		// 	left: 80rpx;
		// 	bottom: 20rpx;
		// 	flex-shrink: 0;
		// }

		.steps {
			padding: 20rpx;
		}

		.step {
			display: flex;

			.r {
				flex: 1;
				padding-left: 30rpx;
				position: relative;

				.title {
					color: #575859;
					font-size: 30rpx;
					margin-bottom: 10rpx;
				}

				.copy {
					color: #428DFC;
					font-size: 24rpx;
					margin-bottom: 20rpx;
				}

				.btns {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;

					.btn {
						flex: 1;
						height: 60rpx;
						background-color: #FFFAE5;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FF8007;

						.icon {
							width: 23rpx;
							height: 31rpx;
							margin-left: 10rpx;
						}
					}

					.btn1 {
						background-color: #E9F3FF;
						color: #428DFC;
						margin-left: 20rpx;
					}
				}

				.inputBox {
					background: #F6F6F6;
					height: 74rpx;
					line-height: 74rpx;
					padding-left: 20rpx;
					width: 370rpx;
					border-radius: 10rpx;
				}

				.add {
					display: flex;

				}

				.example {
					width: 228rpx;
					margin-bottom: 20rpx;
				}

				.addBox {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					border: 1px solid #FFCE54;
					width: 130rpx;
					height: 130rpx;
					border-radius: 10rpx;

					.icon {
						width: 27rpx;
						height: 27rpx;
						margin-bottom: 10rpx;
					}

					.word {
						color: #FF8007;
						font-size: 22rpx;
					}
				}

				.example:first-of-type {
					margin-right: 20rpx;
				}
			}

			.r::before {
				content: '';
				position: absolute;
				width: 16rpx;
				height: 16rpx;
				background-color: #FFC141;
				border-radius: 8rpx;
				top: 8rpx;
				left: -8rpx;
				z-index: 10;
			}

			.r::after {
				content: '';
				position: absolute;
				left: 0;
				top: 20rpx;
				width: 2px;
				bottom: 0;
				background-color: #F6F6F6;
			}

			.l {
				width: 109rpx;
				height: 43rpx;
				position: relative;
				margin-right: 20rpx;

				.icon {
					width: 109rpx;
					height: 43rpx;
				}

				.word {
					width: 109rpx;
					height: 43rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-weight: bold;
					position: absolute;
					left: 0;
					top: 0;
					font-size: 22rpx;
					color: #191615;
				}
			}
		}

		.desc {
			color: #575859;
			font-size: 24rpx;
			line-height: 40rpx;
			padding: 10rpx 30rpx;
		}

		.numBox {
			margin: 0 30rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			box-shadow: 0 0 10rpx rgba(98, 98, 98, 0.2);
			padding: 30rpx 20rpx;

			.num {
				width: 25%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.t {
					color: #FF8007;
					font-size: 30rpx;
				}

				.b {
					font-size: 24rpx;
					color: #575859;
				}
			}
		}

		.header {
			display: flex;
			margin: 10rpx 0;
			padding: 30rpx;
			background-color: #fff;
			border-radius: 10rpx;
			align-items: center;
			position: relative;

			.cover {
				width: 140rpx;
				height: 140rpx;
				margin-right: 20rpx;
				flex-direction: 0;
				border-radius: 10rpx;
			}

			.address {
				font-size: 25rpx;
				color: #575859;
			}

			.moeny {
				font-size: 30rpx;
				color: #FF5B1A;
				margin-left: 40rpx;
			}

			.info {
				flex: 1;

				.title {
					display: flex;
					align-items: center;

					.l {
						flex: 1;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						font-weight: bold;
					}

					.r {
						color: #428DFC;
						font-size: 24rpx;
						flex-shrink: 0;
						display: flex;
						align-items: center;
					}
				}

				.types {
					display: flex;
					align-items: center;
					margin: 20rpx 0;

					.btn {
						background: #428DFC;
						height: 36rpx;
						border-radius: 18rpx;
						padding: 0 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #FFFFFF;
						font-size: 24rpx;
						margin-right: 10rpx;
					}

					.btn1 {
						color: #FF8007;
						font-size: 24rpx;
					}
				}

				.numBox {
					display: flex;
					align-items: center;

					.num {
						display: flex;
						align-items: center;
						font-size: 22rpx;
						margin-left: 10rpx;

						.word {
							color: #428DFC;
						}
					}
				}
			}
		}
	}
</style>
